<template>
    <div class="app">
        <van-nav-bar :title="$t('hello')" />
        <div class="content">
            <h1>{{ $t('hello') }}</h1>
            <van-button type="primary" @click="toggleLanguage">
                {{ currentLanguage === 'en' ? '切换到中文' : 'Switch to English' }}
            </van-button>
            <van-cell-group inset style="margin-top: 20px">
                <van-field v-model="name" :label="$t('button.submit')" />
            </van-cell-group>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

const name = ref('')

const currentLanguage = computed(() => locale.value)

const toggleLanguage = () => {
    locale.value = locale.value === 'en' ? 'zh' : 'en'
}
</script>

<style scoped>
.app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
}

.content {
    padding: 20px;
}
</style>
